<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>收件箱</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>


<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-3">
                    <div class="panel">
                        <div class="panel-body padding-20">
                            <p class=" mb-15">
                                <button class="btn btn-lg btn-primary  btn-block">写信</button>
                            </p>

                            <ul class="list-group bottom-line">
                                <li class="list-group-item">
                                    <a href="javascript:;" class="text-default">
                                        <i class="fa fa-fw fa-envelope-o"></i>收件箱
                                        <span class="badge badge-warning pull-right">12</span>
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="javascript:;" class="text-default">
                                        <i class="fa fa-fw fa-paper-plane-o"></i>已发送
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="javascript:;" class="text-default">
                                        <i class="fa fa-fw fa-file-text-o"></i>草稿箱<span
                                            class="badge badge-info pull-right">2</span>
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="javascript:;" class="text-default">
                                        <i class="fa fa-fw fa-flag-o"></i>重要邮件<span
                                            class="badge badge-primary pull-right">12</span>
                                    </a>
                                </li>
                                <li class="list-group-item">
                                    <a href="javascript:;" class="text-default">
                                        <i class="fa fa-fw fa-trash-o"></i>垃圾邮件<span
                                            class="badge badge-danger pull-right">5</span>
                                    </a>
                                </li>
                            </ul>
                            <p class="mt-20 strong">
                                邮件类型
                            </p>
                            <p>
                                <i class="fa fa-fw fa-circle text-primary"></i><a href="" class="text-default"> 重要</a>
                            </p>
                            <p>
                                <i class="fa fa-fw fa-circle text-success"></i><a href="" class="text-default"> 工作</a>
                            </p>
                            <p>
                                <i class="fa fa-fw fa-circle text-warning"></i><a href="" class="text-default"> 文件</a>
                            </p>
                            <p>
                                <i class="fa fa-fw fa-circle text-info"></i><a href="" class="text-default"> 个人</a>
                            </p>
                            <p class="mt-20 strong">
                                邮件标签
                            </p>
                            <p>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>家庭</a>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>工作</a>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>上班</a>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>休闲</a>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>娱乐</a>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>广告</a>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>信息</a>
                                <a class="btn btn-xs btn-default mb-5"><i class="fa fa-fw fa-tag"></i>健身</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="panel">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-xs-9">
                                    <h4>收件箱(21)</h4>
                                </div>
                                <div class="col-xs-3">
                                    <div class="input-group">
                                        <input class="form-control" placeholder="搜索文件标题、正文信息">
                                        <span class="input-group-addon">
                                            <i class="fa fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xs-12">
                                    <p class="mt-10">
                                        <button class="btn btn-sm btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="刷新" onclick="$.table.refresh()"><i class="fa fa-fw fa-refresh"></i></button>
                                        <button class="btn btn-sm btn-default" title="全选" onclick="$.table.checkAll()">全选</button>
                                        <button class="btn btn-sm btn-default" title="取消全选" onclick="$.table.uncheckAll()">取消全选</button>
                                        <button class="btn btn-sm btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="设为已读"><i class="fa fa-fw fa-eye"></i></button>
                                        <button class="btn btn-sm btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="设为重要"><i class="fa fa-fw fa-flag-o"></i></button>
                                        <button class="btn btn-sm btn-default" data-placement="bottom" data-toggle="tooltip" data-original-title="删除选中"><i class="fa fa-fw fa-trash-o"></i></button>
                                        <span class="btn-group pull-right">
                                            <button class="btn btn-sm btn-default" type="button" onclick="$.table.prevPage()"> <i class="fa fa-arrow-left"></i></button>
                                            <button class="btn btn-sm btn-default" type="button" onclick="$.table.nextPage()">  <i class="fa fa-arrow-right"></i></button>
                                        </span> 

                                    </p>
                                </div>
                                <div class="col-xs-12 table-toolbar-hide">
                                    <table id="bootstrap-table"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
    <script type="text/javascript">


        $(function () {
            var options = {
                url: "./../../../static/data/mail.json",
                method: 'get',
                modalName: '收件箱',
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                showHeader:false,
                clickToSelect: false,
                sidePagination: 'client',
                rowStyle:function(row,index){

                    if(row.status == 0) {
                        return {
                            css:{
                                "background":"#f9f9f9",
                                "font-weight":"bold",
                            }
                        }
                    }
                    return '';
                },
                columns: [{
                    checkbox: true
                },
                {
                    title: '序号',
                    width: 5,
                    align: "center",
                    formatter: function (value, row, index) {
                        return $.table.serialNumber(index);
                    }
                },
                {
                    field: 'sender',
                    title: '发送人'
                },
                {
                    field: 'important',
                    title: '设为重要',
                    formatter: function (value, row, index) {
                        if (value == 1) {
                            return '<i class="fa fa-flag-o"></i>';
                        } 
                        return '';
                    }
                },
                {
                    field: 'title',
                    title: '标题'
                },
                {
                    field: 'attachment',
                    title: '附件',
                    formatter: function (value, row, index) {
                        if (value == 1) {
                            return '<i class="fa fa-paperclip"></i>';
                        } 
                        return '';
                    }
                },
                {
                    field: 'time',
                    title: '时间'
                },
                {
                    title: '操作',
                    align: 'right',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if(row.status == 0) {
                            actions.push('<a class="btn btn-default btn-xs" href="#" title="设为已读"><i class="fa fa-eye"></i></a> ');
                        }
                        actions.push('<a class="btn btn-default btn-xs" href="#"><i class="fa fa-trash"></i></a> ');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });
    </script>
</body>

</html>